<template>
	<div class="special-apply">
		<div class="special-top">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>当前位置：</el-breadcrumb-item>
				<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
				<el-breadcrumb-item>特殊水卡</el-breadcrumb-item>
				<el-breadcrumb-item>特殊水卡开卡</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="gray-line"></div>
		<div class="special-wrapper">
			<div class="special-title">
				<el-icon class="el-icon-postcard"></el-icon>
				<span>用户信息</span>
			</div>
			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">姓名</span>
					<el-input class="row-ipt" v-model="full_name" size="medium" placeholder="请输入姓名"></el-input>
					<span class="hintStr">*</span>
				</div>
				<div class="row-cell">
					<span class="row-label">手机号码</span>
					<el-input class="row-ipt" v-model="tel" size="medium" maxlength="11" placeholder="请输入手机号码"></el-input>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<!--<div class="row-cell">-->
					<!--<span class="row-label">性别</span>-->
					<!--<el-radio-group v-model="gender" class="row-ipt">-->
						<!--<el-radio label="1">男</el-radio>-->
						<!--<el-radio label="2">女</el-radio>-->
					<!--</el-radio-group>-->
				<!--</div>-->
				<div class="row-cell">
					<span class="row-label">园区名称</span>
					<el-select @change="chooseVillage" size="medium" class="row-ipt" v-model="villageIndex" placeholder="请选择园区名称">
						<el-option v-for="(item,index) in villageList" :label="item.village_name" :value="index" :key="item.id">
						</el-option>
					</el-select>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line" v-if="villageIndex!==''">
				<div class="row-cell">
					<span class="row-label">地址信息</span>
					<div class="disable-cell max-width-300 over-hidden">
						{{villageList[villageIndex].province_name}}-{{villageList[villageIndex].city_name}}-{{villageList[villageIndex].area_name}}
					</div>
					<span class="deliver-line">-</span>
					<div class="disable-cell max-width-300 over-hidden">{{villageList[villageIndex].address}}</div>
					<span class="deliver-line">-</span>
					<el-input size="medium" placeholder="请输入详细地址" v-model="addressTwo"></el-input>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">证件类型</span>
					<el-select v-model="certificate" size="medium" class="row-ipt" placeholder="请选择证件类型">
						<el-option v-for="item in certificateType" :value="item.id" :label="item.label" :key="item.label">
						</el-option>
					</el-select>
					<span class="hintStr">*</span>
				</div>
				<div class="row-cell">
					<span class="row-label">证件号码</span>
					<el-input v-model="certificate_number" class="row-ipt" size="medium" placeholder="请输入证件号码"></el-input>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell  upload-cell">
					<span class="row-label">证件照片</span>
					<el-upload accept="image/*" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload"
						:limit="maxUploadNumber" :action="uploadUrl" :on-error="uploadError" :on-remove="handleRemove"
						:on-exceed="uploadExceed" :on-progress="uploadProgress" :on-success="uploadSuccess"
						list-type="picture-card">
						<i slot="default" class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="special-title">
				<el-icon class="el-icon-bank-card"></el-icon>
				<span>水卡信息</span>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">水卡类型</span>
					<el-select size="medium" v-model="cardType" class="row-ipt" placeholder="请选择水卡类型">
						<el-option filterable v-for="item in cardSpecialType" :value="item.id" :label="item.label"
							:key="item.label">
						</el-option>
					</el-select>
					<span class="hintStr">*</span>
				</div>
				<div class="row-cell">
					<span class="row-label">水卡卡号</span>
					<el-input class="row-ipt" v-model="card" size="medium" placeholder="请输入水卡卡号"></el-input>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">审核类型</span>
					<el-select v-model="audit_type" size="medium" class="row-ipt" placeholder="请选择审核类型">
						<el-option v-for="item in auditTypes" :value="item.id" :label="item.label" :key="item.label">
						</el-option>
					</el-select>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">充值金额</span>
					<el-radio-group v-model="recharge" size="medium">
						<el-radio  class="mr-10" :key="item" v-for="item in rechargeConfig" :label="item" border>{{item}}元</el-radio>
					</el-radio-group>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">水卡押金</span>
					<el-radio-group v-model="deposit" size="medium">
						<el-radio class="mr-10" :key="item" v-for="item in depositConfig" :label="item" border>{{item}}元</el-radio>
					</el-radio-group>
					<span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line submit">
				<el-button size="medium" type="primary" @click="applySpecialCard" class="submit-btn">确定</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	const certificateType = [{ //证件类型
		id: '1',
		label: '身份证'
	}, {
		id: '2',
		label: '军官证'
	}, {
		id: '3',
		label: '户口本'
	}, {
		id: '4',
		label: '出身证明'
	}];
	const auditTypes = [{ //审查类型
		id: '1',
		label: '年审'
	}, {
		id: '2',
		label: '月审'
	}, {
        id: '3',
        label: '不定期'
    }];
	export default {
		name: "Sordinaryapply",
		data() {
			return {
				maxUploadNumber: 2,
				uploadUrl: process.env.API_ROOT + "Common/Common/upload",
				cardSpecialType: [],//特殊水卡类型
				cardType: '',//特殊水卡的选中值
				full_name: "",//姓名
				tel: "",  //电话
				villageList: [],
				villageIndex: "", //选择的园区Index
				certificateType,
				certificate: '',//选择证件
				certificate_number: "",//证件号码
				rechargeConfig: [],//充值金额配置
				recharge: "",
				depositConfig: [],
				deposit: '',
				addressTwo: '',
				card: "",
				auditTypes,
				audit_type: '',//选中的审查类型
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				uploadImg: [],
			}
		},

		mounted() {
			this.getSpecialCardType();
			this.getVillageList();
			this.getRechargeConfig();
			this.getDepositConfig();
		},
		methods: {
			//申请特殊水卡
			applySpecialCard() {
				if (this.full_name == "") {
					this.$message.error("请输入姓名");
					return false;
				}
				let tel = this.tel;
				if (this.tel == "") {
					this.$message.error("请输入手机号码");
					return false;
				}
				// if (this.gender === "") {
				// 	this.$message.error("请选择性别");
				// 	return false;
				// }
				if (this.villageIndex === "") {
					this.$message.error("请选择园区");
					return false;
				}
				if (this.certificate === "") {
					this.$message.error("请选择证件类型");
					return false;
				}
				if (this.certificate_number == "") {
					this.$message.error("请输入证件号码");
					return false;
				}
				if (this.uploadImg.length == 0) {
					this.$message.error("请上传证件照片");
					return false;
				}
				if (this.cardType === "") {
					this.$message.error("请选择水卡类型");
					return false;
				}
				if (this.card == "") {
					this.$message.error("请填写水卡号");
					return false;
				}
				if (this.audit_type === "") {
					this.$message.error("请选择审核类型");
					return false;
				}
				const audit_data = [];
				this.uploadImg.forEach(item => {
					audit_data.push(item.url);
				})
				const village = this.villageList[this.villageIndex];
				this.$post({
					url: "Partner/WaterCard/auditSpecialCard",
					data: {
						full_name: this.full_name,
						tel: this.tel,
						card_class: 2,
						card_type: this.cardType,
						paper_type: this.certificate,
						audit_type: this.audit_type,
						IDcard: this.certificate_number,
						province: village.province,
						city: village.city,
						sn: this.card,
						area: village.area,
						address: village.address,
						address_two: this.addressTwo,
						village_name: village.village_name,
						card_price: this.recharge,
						deposit: this.deposit,
						audit_data: audit_data
					}, success: res => {
						if (res.code > 0) {
								this.$message.success(res.message);
								setTimeout(()=>{
									this.$router.push({ path: '/applylist' })
								},1500)
						} else {
							this.$message.error(res.message || "网络错误");
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})

			},

			chooseVillage(val) {
				this.villageIndex = val;
				this.addressTwo = "";
			},

			//获取特殊水卡类型
			getSpecialCardType() {
				this.$post({
					url: "Partner/WaterCard/getCarType",
					data: {
						type: 2,
						is_apply: 1
					},
					success: res => {
						if (res.code > 0) {
							this.cardSpecialType = res.data;
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})
			},

			//获取园区列表
			getVillageList() {
				this.$post({
					url: "Partner/WaterCard/getPartnerVillage",
					success: res => {
						if (res.code > 0) {
							this.villageList = res.data;
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})
			},

			//获取充值金额配置
			getRechargeConfig() {
				this.$post({
					url: 'Partner/WaterCard/getSpecialCardRechargeConfig',
					success: (res) => {
						if (res.code > 0) {
							this.rechargeConfig = res.data;
							this.recharge = res.data[0];//默认配置第一条选中
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})
			},

			//获取押金配置
			getDepositConfig() {
				this.$post({
					url: "Common/Common/cardDeposit",
					success: res => {
						if (res.code > 0) {
							this.depositConfig = res.data;
							this.deposit = res.data[0];
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})
			},




			uploadExceed() {
				this.$message.error(`最多只能上传${this.maxUploadNumber}张图片`);
			},


			beforeUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过2MB!');
				}
				return isLt2M;
			},



			uploadProgress() {
				this.loading = this.$loading({
					lock: true,
					text: '图片上传中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			},

			uploadError() {
				this.loading.close();
			},

			//上传营业执照上传成功
			uploadSuccess(e, file, fileList) {
				this.loading.close();
				if (e.code === 1000) {
					let uploadImg = [];
					fileList.forEach(item => {
						if (item.response.code > 0) {
							uploadImg.push(
								item.response.data
							);
						}
					})
					this.uploadImg = uploadImg;
					console.log(this.uploadImg, "uploadSuccess this.uploadImg");
				} else {
					this.$message.error(e.message);
				}
			},

			handleRemove(file, fileList) {
				//console.log(file, fileList);
				let uploadImg = [];
				fileList.forEach(item => {
					if (item.response.code > 0) {
						uploadImg.push(
							item.response.data
						);
					}
				})
				this.uploadImg = uploadImg;
				console.log(this.uploadImg, "handleRemove this.uploadImg");
			},

			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		},
	}
</script>
<style scoped>
 .hintStr{
    padding-left: 10px;
    color: #FF6565;
  }
	.special-top {
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 24px;
	}

	.gray-line {
		height: 12px;
		width: 100%;
		background: #fafafa;
	}

	.special-title {
		padding: 35px 0 0 25px;
		color: #2C5586;
	}

	.row-line {
		display: flex;
		align-items: center;
		width: 800px;
		justify-content: space-between;
		padding-left: 31px;
	}


	.row-cell {
		display: flex;
		align-items: center;
		margin-top: 20px;
	}

	.row-label {
		flex-shrink: 0;
		display: inline-block;
		width: 80px;
		text-align: right;
		margin-right: 10px;
		font-size: 14px;
	}

	.row-ipt {
		width: 240px;
	}

	.upload-cell {
		align-items: normal;
	}

	.upload-cell .row-label {
		margin-top: 20px;
	}

	.submit {
		margin-top: 30px;
    
	}

	.submit-btn {
		width: 80px;
		margin-top: 10px;
		margin-left: 20px;
	}

	.disable-cell {
		background-color: #fafafa;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		outline: 0;
		padding: 0 15px;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		height: 32px;
		line-height: 32px;
		font-size: 15px;
		user-select: none;
		flex-shrink: 0;
	}

	.deliver-line {
		display: inline;
		padding: 0 5px;
	}


	.max-width-300 {
		max-width: 300px;
	}

	.over-hidden {

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mr-10{
		margin-right: 10px;
	}
</style>